<template>
  <div class="app-container">
    <el-dialog v-if="dialogPreVisible" title="" :visible.sync="dialogPreVisible" :close-on-click-modal="false" width="60%" class="dialogText header-none" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)" center @closed="cancel">
      <div v-loading="loading">
        <el-row>
          <mainTilte title="出运单基本信息" />
        </el-row>
        <el-form label-width="100px">
          <billForm :form-data="info" :show-entity-warehouse="true" />
        </el-form>
        <div v-if="info.products && info.products.length > 0">
          <el-row>
            <mainTilte title="转运商品明细信息" class="mb0" />
          </el-row>
          <div class="pre-edit-btn">
            <el-button type="primary" @click="inputPre('product')">录入预分仓</el-button>
          </div>
          <el-table ref="productTable" :data="info.products" stripe fit border class="mb24" @selection-change="selectHandler($event, 'product')">
            <el-table-column type="selection" width="55" />
            <el-table-column label="是否录入预分仓" width="100" align="center">
              <template slot-scope="scope">
                {{ isInputPre(scope.row.id, 'product') ? '已录入' : '未录入' }}
              </template>
            </el-table-column>
            <el-table-column prop="purchase_order_code" label="采购申请单号" width="180" align="center" />
            <el-table-column prop="contract_code" label="合同号" width="180" align="center" />
            <el-table-column prop="goods_code" label="系统sku" width="180" align="center" />
            <el-table-column prop="trans_number" label="转运数量" width="180" align="center" />
            <el-table-column label="交货日期" width="180" align="center">
              <template slot-scope="scope">
                {{ scope.row.arrive_date | formatDate('{y}-{m}-{d}') }}
              </template>
            </el-table-column>
            <el-table-column prop="goods_name" label="中文名称" width="180" align="center" />
            <el-table-column prop="goods_name_en" label="英文名称" width="180" align="center" />
            <el-table-column prop="container_rate" label="箱率" width="180" align="center" />
            <el-table-column prop="notes" label="备注" width="180" align="center" />
          </el-table>
        </div>
        <div v-if="info.parts.length > 0">
          <el-row>
            <mainTilte title="转运配件明细信息" class="mb0" />
          </el-row>
          <div class="pre-edit-btn">
            <el-button type="primary" @click="inputPre('part')">录入预分仓</el-button>
          </div>
          <el-table ref="partTable" :data="info.parts" stripe fit border @selection-change="selectHandler($event, 'part')">
            <el-table-column type="selection" width="55" />
            <el-table-column label="是否录入预分仓" width="100" align="center">
              <template slot-scope="scope">
                {{ isInputPre(scope.row.id, 'part') ? '已录入' : '未录入' }}
              </template>
            </el-table-column>
            <el-table-column prop="purchase_order_code" label="采购申请单号" width="180" align="center" />
            <el-table-column prop="contract_code" label="合同号" width="180" align="center" />
            <el-table-column prop="goods_code" label="配件编码" width="180" align="center" />
            <el-table-column prop="trans_number" label="转运数量" width="180" align="center" />
            <el-table-column label="交货日期" width="180" align="center">
              <template slot-scope="scope">
                {{ scope.row.arrive_date | formatDate('{y}-{m}-{d}') }}
              </template>
            </el-table-column>
            <el-table-column prop="goods_name" label="中文名称" width="180" align="center" />
            <el-table-column prop="container_rate" label="箱率" width="180" align="center" />
            <el-table-column prop="notes" label="备注" width="180" align="center" />
          </el-table>
        </div>
        <div slot="footer" class="dialog-footer-center">
          <span class="dialog-footer">
            <el-button type="primary" :loading="btnLoading" @click="submit">保存</el-button>
            <el-button @click="cancel">取消</el-button>
          </span>
        </div>
      </div>
    </el-dialog>
    <!-- 录入预分仓 弹窗 -->
    <input-pre-dialog ref="inputPreDialog" @submit="inputSubmitHandler" />
  </div>
</template>

<script>
import billForm from './billForm'
import inputPreDialog from './inputPreDialog'
export default {
  components: { billForm, inputPreDialog },
  data() {
    return {
      info: {}, // 出运单 详情
      dialogPreVisible: false, // 弹窗显示
      loading: false, // loading

      // 表单
      form: {
        trans_order_id: '',
        products: [],
        parts: []
      },

      btnLoading: false, // 按钮 loading

      productSelectList: [], // 商品选中列表

      partSelectList: [] // 配件选中列表

    }
  },
  methods: {
    // 显示
    show(id) {
      const vm = this
      vm.loading = true
      vm.$http
        .get(`/transhipment-order/${id}`)
        .then((res) => {
          vm.info = res.data
          vm.dialogPreVisible = true
          vm.loading = false
        })
        .catch(() => {
          vm.loading = false
        })
    },
    // 取消
    cancel() {
      this.info = {}
      this.form.trans_order_id = ''
      this.form.products = []
      this.form.parts = []
      this.dialogPreVisible = false
    },
    // 提交
    submit() {
      const vm = this
      const infoList = vm.info.products.concat(vm.info.parts)
      const formList = vm.form.products.concat(vm.form.parts)
      const everyInputPre = infoList.every(e => {
        const index = formList.findIndex(ele => ele.id === e.id)
        return index > -1
      })
      if (!everyInputPre) {
        return vm.$message.error('请录入所有商品和配件预分仓')
      }
      vm.btnLoading = true
      const params = {
        trans_order_id: vm.info.id,
        suborder: []
      }
      params.suborder = formList.map(e => {
        return {
          products: e.products
        }
      })
      vm.$http.post('/transhipment-order/sub-orders', params).then(res => {
        vm.$message.success('预分仓成功')
        vm.$emit('submit')
        vm.cancel()
        vm.btnLoading = false
      }).catch(() => {
        vm.btnLoading = false
      })
    },
    // 选择处理函数
    selectHandler(val, type) {
      const vm = this
      if (type === 'product') {
        vm.productSelectList = val
      } else {
        vm.partSelectList = val
      }
    },
    // 录入预分仓
    inputPre(type) {
      const vm = this
      const list =
        type === 'product' ? vm.productSelectList : vm.partSelectList
      const length = list.length
      if (length === 0) {
        vm.$message.error('最少选择一条数据')
        return false
      }
      if (length > 1) {
        vm.$message.error('最多选择一条数据')
        return false
      }
      // 打开 录入预分仓 弹窗
      const formList = type === 'product' ? vm.form.products : vm.form.parts
      const item = formList.find(e => e.id === list[0].id)
      vm.$refs.inputPreDialog.show(list[0], item, type)
    },
    // 录入预分仓 成功处理函数
    inputSubmitHandler({ item, type }) {
      const product_id = item.id
      const list = type === 'product' ? this.form.products : this.form.parts
      if (type === 'product') {
        this.$refs.productTable.clearSelection()
      } else {
        this.$refs.partTable.clearSelection()
      }
      const index = list.findIndex(e => e.id === product_id)
      if (index > -1) {
        list.splice(index, item)
      } else {
        list.push(item)
      }
    },
    // 是否已经录入信息
    isInputPre(id, type) {
      const vm = this
      const list = type === 'product' ? vm.form.products : vm.form.parts
      const index = list.findIndex(e => e.id === id)
      return index > -1
    }
  }
}
</script>

<style scoped>
/deep/ .el-autocomplete {
  width: 100%;
}
.pre-edit-btn {
  margin: 16px 0;
}
</style>
